<main class="mx-2 md:mx-5 lg:mx-auto min-h-screen flex items-center" style="min-height: 100dvh">
	<section class="mx-auto max-w-5xl flex-1">
		<div
			class="flex flex-col h-full justify-between md:flex-row items-center md:items-center min-h-[33vh] gap-6 px-2 md:px-4"
		>
			<!-- LEFT COLUMN -->
			<div class="flex flex-col flex-1 gap-6">
				<h1 class="font-display text-5xl md:text-6xl">
					<span class="text-green">Text-to-CAD</span> is now available in
					<span class="text-blue">Zoo Design Studio</span>
				</h1>

				<a
					href="https://app.zoo.dev/?cmd=set-layout&groupId=application&layoutId=ttc"
					class="uppercase w-full flex items-center justify-center text-center text-white bg-blue hover:bg-blue/80 px-4 py-3 font-mono"
				>
					Try Zoo Design Studio in Browser
				</a>
			</div>

			<!-- RIGHT COLUMN -->
			<div class="flex-1 flex justify-center md:justify-end">
				<video
					src="/ttc-generate-with-ttc.mp4"
					autoplay
					muted
					loop
					class="w-full max-w-md rounded-lg"
				/>
			</div>
		</div>
	</section>
</main>
